<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>{{num}}</p>
        <button @click="num++">按钮</button>


        <p>{{persons}}</p>
        <button @click="add">添加</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const vm = new Vue({
            data: {
                num: 0,
                persons: [
                    { id: 1, name: "华哥", age: 15 },
                    { id: 2, name: "tomcat", age: 15 },
                ]
            },
            methods: {
                add() {
                    // this.persons.push({ id: 3, name: "红浪漫" });
                    this.persons[0].age++;
                },
            },
            watch: {
                // handler(newVal, oldVal) {
                //     console.log(newVal, oldVal);
                // },
                // immediate: true,
                persons: {
                    handler(newVal, oldVal) {
                        console.log(newVal, oldVal);
                    },
                    // deep: true,
                    immediate: true,
                }
            },


        })
        vm.$mount("#app");
    </script>
</body>

</html>